<template>
  <div class="app-container" style="background-color: #fff; margin: 20px 40px">
    <div class="personal-from2">
      <wise-form :columns="formItems" :loading="loading" :old-object="user" @on-submit="submitHandle" />
    </div>
  </div>
</template>

<script>
import { getInfo } from '@/api/user'
import WiseForm from '@/components/Crud/Form/wiseForm'
import { postHandle } from '@/api'

export default {
  name: 'Profile',
  components: { WiseForm },
  data() {
    return {
      user: {},
      loading: false,
      formItems: [
        {
          prop: 'picture',
          type: 'file',
          rules: [
            { required: true, message: '请选择个人头像', trigger: 'change' }
          ],
          use: ['table', 'add', 'view', 'edit', 'search']
        },
        {
          label: '真实姓名',
          prop: 'username',
          type: 'text',
          labelWidth: '120px',
          maxlength: 20,
          rules: [
            { required: true, message: '请输入真实姓名', trigger: 'blur' },
            { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
          ],
          placeholder: '请输入名称',
          use: ['table', 'add', 'show', 'edit', 'search']
        },
        {
          label: '联系方式',
          prop: 'phone',
          type: 'text',
          labelWidth: '120px',
          maxlength: 20,
          rules: [
            { required: true, message: '请输入联系方式', trigger: 'blur' }
          ],
          placeholder: '请输入联系方式',
          use: ['table', 'add', 'show', 'edit', 'search']
        }
      ]
    }
  },
  computed: {
    userId() {
      return this.$store.state.user.userId
    }
  },
  created() {
    this.getUser()
  },
  methods: {
    getUser() {
      getInfo(this.userId).then(res => {
        this.user = res.result
      })
    },
    submitHandle(obj) {
      postHandle('/api/v1/welder-uac-second/user-information-comb/update-user-info/' + obj.id, { obj }).then(response => {
        this.$message('操作成功')
        this.loading = false
        this.$store.dispatch('user/getInfo')
      }).catch(error => {
        console.error(error)
        this.loading = false
        this.$message.error('操作失败')
      })
    }
  }
}
</script>
